<template>
  <div style="display: inline-block; margin: 10px 10px;">
    <el-card :body-style="{ padding: '0px' }" class="teacher-box">
      <span slot="header" style="font-size:20px;"> {{ hname }} </span>
      
      <div class="box-img">
        <img 
          :src="avatar"  
          style="max-width: 135px;height: 180px;border-radius:5px;"
        />
      </div>

      <div class="box-text"> 
        <p><strong>Speaker:</strong> {{name}} </p>
        <!-- <p><strong>Schedule:</strong> {{schedule}} </p> -->
        <!-- <p><strong>Location:</strong> {{location}} </p> -->
        <p style="padding: 0 15px;margin-bottom: 5px;">{{synopsis}}</p>
      </div>

    </el-card>
  </div>
</template>

<script>
export default { 
  props: {
    hname : {type:String},
    name : {type:String},
    schedule : {type:String},
    location : {type:String},
    synopsis : {type:String},
    imgUrl: {type:String,default:""},
  },
  data() {
    return {
      avatar: "http://rfly.buaa.edu.cn/images/people/default.png"
    };
  },
  created(){
    if (this.imgUrl !== "") {
      this.avatar = this.imgUrl
    }
  }

};
</script>

<style lang="less" scoped>
@img-width: 1200px;
@img-height: 250px;

.el-card{
  width: @img-width;min-height: @img-height; border-radius:20px;
  // background-color: #99ccff;
  /deep/.el-card__header {text-align: center; padding: 8px 20px; border-bottom:none;font-weight: bold;}

}

.box-img{ float:left; margin: 0px 20px; }
.box-text{ 
  font-size:18px; 
  text-align: left;
  line-height: 1.7em;
}

</style>
